<template>
   <div class="register-container">
      <div class="register-box">
         <div class="register-header">
            <h2>用户注册</h2>
            <p>欢迎加入图书销售系统</p>
         </div>

         <el-form
             ref="registerForm"
             :model="registerData"
             :rules="rules"
             label-width="100px"
             class="register-form"
         >
            <el-form-item label="用户账号" prop="userCode">
               <el-input
                   v-model="registerData.userCode"
                   placeholder="请输入用户账号（字母、数字）"
                   clearable
                   maxlength="20"
               >
                  <template #prefix>
                     <el-icon><User/></el-icon>
                  </template>
               </el-input>
            </el-form-item>

            <el-form-item label="用户名称" prop="userName">
               <el-input
                   v-model="registerData.userName"
                   placeholder="请输入用户名称"
                   clearable
                   maxlength="50"
               >
                  <template #prefix>
                     <el-icon><Avatar/></el-icon>
                  </template>
               </el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
               <el-input
                   v-model="registerData.password"
                   type="password"
                   placeholder="请输入密码（6-20位）"
                   show-password
                   maxlength="20"
               >
                  <template #prefix>
                     <el-icon><Lock/></el-icon>
                  </template>
               </el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmPassword">
               <el-input
                   v-model="registerData.confirmPassword"
                   type="password"
                   placeholder="请再次输入密码"
                   show-password
                   maxlength="20"
               >
                  <template #prefix>
                     <el-icon><Lock/></el-icon>
                  </template>
               </el-input>
            </el-form-item>

            <el-form-item label="性别" prop="userSex">
               <el-radio-group v-model="registerData.userSex">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
               </el-radio-group>
            </el-form-item>

            <el-form-item>
               <el-button
                   type="primary"
                   @click="handleRegister"
                   :loading="loading"
                   style="width: 100%;"
               >
                  立即注册
               </el-button>
            </el-form-item>

            <el-form-item>
               <div class="register-footer">
                  <span>已有账号？</span>
                  <el-link type="primary" @click="goToLogin">立即登录</el-link>
                  <span style="margin-left: 20px;">或</span>
                  <el-link type="primary" @click="goToHome">返回首页</el-link>
               </div>
            </el-form-item>
         </el-form>
      </div>
   </div>
</template>

<script>
import {User, Avatar, Lock} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'
import axiosUtil from '@/utils/axiosUtil'

export default {
   name: 'UserRegister',
   components: {
      User, Avatar, Lock
   },
   data() {
      // 自定义验证规则：确认密码
      const validateConfirmPassword = (rule, value, callback) => {
         if (value === '') {
            callback(new Error('请再次输入密码'))
         } else if (value !== this.registerData.password) {
            callback(new Error('两次输入密码不一致'))
         } else {
            callback()
         }
      }

      return {
         registerData: {
            userCode: '',
            userName: '',
            password: '',
            confirmPassword: '',
            userSex: '男'
         },
         rules: {
            userCode: [
               {required: true, message: '请输入用户账号', trigger: 'blur'},
               {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'},
               {pattern: /^[a-zA-Z0-9_]+$/, message: '只能包含字母、数字和下划线', trigger: 'blur'}
            ],
            userName: [
               {required: true, message: '请输入用户名称', trigger: 'blur'},
               {min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur'}
            ],
            password: [
               {required: true, message: '请输入密码', trigger: 'blur'},
               {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
            ],
            confirmPassword: [
               {required: true, validator: validateConfirmPassword, trigger: 'blur'}
            ],
            userSex: [
               {required: true, message: '请选择性别', trigger: 'change'}
            ]
         },
         loading: false
      }
   },
   methods: {
      // 注册提交
      handleRegister() {
         this.$refs.registerForm.validate((valid) => {
            if (valid) {
               this.loading = true
               axiosUtil.postForm({
                  url: '/login/userRegister',
                  data: {
                     userCode: this.registerData.userCode,
                     userName: this.registerData.userName,
                     password: this.registerData.password,
                     userSex: this.registerData.userSex
                  },
                  success: res => {
                     this.loading = false
                     ElMessage.success('注册成功！请登录')
                     // 延迟跳转到登录页
                     setTimeout(() => {
                        this.$router.push('/clientlogin')
                     }, 1500)
                  },
                  error: err => {
                     this.loading = false
                     ElMessage.error(err || '注册失败，请重试')
                  }
               })
            } else {
               ElMessage.warning('请正确填写表单')
               return false
            }
         })
      },
      // 跳转到登录页
      goToLogin() {
         this.$router.push('/clientlogin')
      },
      // 返回首页
      goToHome() {
         this.$router.push('/')
      }
   }
}
</script>

<style scoped>
.register-container {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   padding: 20px;
}

.register-box {
   width: 100%;
   max-width: 500px;
   background: white;
   border-radius: 12px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   padding: 40px;
}

.register-header {
   text-align: center;
   margin-bottom: 30px;
}

.register-header h2 {
   font-size: 28px;
   color: #303133;
   margin-bottom: 10px;
}

.register-header p {
   color: #909399;
   font-size: 14px;
}

.register-form {
   margin-top: 20px;
}

.register-footer {
   text-align: center;
   width: 100%;
   color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
   .register-box {
      padding: 30px 20px;
   }

   .register-header h2 {
      font-size: 24px;
   }
}
</style>
